<div class="card" id="LoginArea" [@routerTransition]>
    <div #cardBody class="body">
        <form #loginForm="ngForm" id="LoginForm" method="post" novalidate (ngSubmit)="login()">
            <h4 class="text-center">{{l("LogIn")}}</h4>

            <div class="input-group">
                <span class="input-group-addon">
                    <i class="material-icons">person</i>
                </span>
                <div class="form-line">
                    <input materialInput [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required maxlength="255" />
                </div>
            </div>

            <div class="input-group">
                <span class="input-group-addon">
                    <i class="material-icons">lock</i>
                </span>
                <div class="form-line">
                    <input materialInput type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{l('Password')}}" required maxlength="32">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-8 p-t-5">
                    <input type="checkbox" [(ngModel)]="loginService.rememberMe" name="rememberMe" id="rememberme" class="filled-in chk-col-pink" value="true">
                    <label for="rememberme">{{l("RememberMe")}}</label>
                </div>
                <div class="col-xs-4">
                    <button id="LoginButton" class="btn btn-block bg-pink waves-effect" type="submit">{{l("LogIn")}}</button>
                </div>
            </div>
            <hr />
            <div class="row m-t-20">
                <div class="col-xs-6" *ngIf="multiTenancySideIsTenant">
                    <a [routerLink]="['../register']" class="btn btn-block bg-deep-purple waves-effect">{{l("Register")}}</a>
                </div>
                <div class="col-xs-6 text-right">
                    <button type="button" (click)="redirectToRegisterTenant()" [routerLink]="['../register-tenant']" [queryParams]="{TenantId: 0}" id="register-btn" class="btn btn-block bg-deep-purple waves-effect">{{l("NewTenant")}}</button>
                    <!--<button [routerLink]="['../register-tenant']" [queryParams]="{TenantId: 0}" id="register-btn" class="btn btn-block bg-deep-purple waves-effect">{{l("NewTenant")}}</button>-->
                </div>
            </div>
        </form>
    </div>
</div>
